[note]大小不固定的图片、多行文字的水平垂直居中

大小不固定的图片、多行文字的水平垂直居中

display:table-cell+display:inline方式

不固定大小的图片

display:table,vertical-align:middle是现代浏览器中实现图片垂直居中比较方便的方法
IE6-7 hack：增加一个高度等于图片容器的高的空标签height: 100%，设置vertical-align: middle

html结构：ul>li>a>img+span

.img-list {
  a {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
}
// if lt IE 8
.img-list {
  _height: 0;
  *zoom: 1;
  a {
    display: block;
  }
  span {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
}

http://codepen.io/zplus/pen/z...

多行文字

• 不支持<IE8的版本

• 外层不能浮动（如 .demo {float: left})

.demo {
  display: table-cell;
  vertical-align: middle;
}
span {
  display: inline-block;
}

http://codepen.io/zplus/pen/w...

空标签

跟上面一种方法类似，这里直接使用空标签设置display: inline-block; vertical-align: middle; height: 100%来触发垂直居中

html结构：ul>li>a>img+span

.img-list {
  a {
    font-size: 0;
  }
  img {
    vertical-align: middle;
  }
  span {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 1;
  }
}

http://codepen.io/zplus/pen/e...

参考链接

CSS制作图片水平垂直居中
大小不固定的图片、多行文字的水平垂直居中